<template>
	<view class="add-student">
		<u-form
			labelPosition="left"
			:model="formData"
			:rules="rules"
			labelWidth="240rpx"
			ref="form"
		>
			<view class="form-label-top margin-top-3">
				<u-form-item label="姓名" prop="name" borderBottom required>
					<view class="d-flex justify-space-between">
						<view>
							<u-input v-model="formData.name" placeholder="请输入姓名" border="none" />
							
							<view style="margin-top: 36rpx;">
								<u-radio-group v-model="formData.gender">
								    <u-radio label="男" :name="1" />
								    <u-radio label="女" :name="0" :customStyle="{marginLeft: '60rpx'}" />
								</u-radio-group>
							</view>
						</view>
						<u-upload
							:fileList="fileList"
							name="file"
							@afterRead="afterRead"
							@delete="deletePic"
						/>
					</view>
				</u-form-item>
			</view>
			<u-form-item label="联系电话" prop="phone" borderBottom>
				<u-input v-model="formData.phone" placeholder="请输入联系电话" border="none" type="number" />
			</u-form-item>
			<u-form-item label="生日">
				<view @click="showBirthdayPicker = true" class="flex-between">
					<u-text :text="formData.birthday" v-if="formData.birthday" color="#303133"></u-text>
					<u-text text="请选择生日" v-else color="#c0c4cc"></u-text>
					<u-icon name="arrow-right" color="#BEBEBE" size="28rpx"></u-icon>
				</view>
				<u-datetime-picker
					v-model="Default"
					:show="showBirthdayPicker"
					mode="date"
					:minDate="minDate"
					:maxDate="maxDate"
					@confirm="confirmBirthday"
					@cancel="showBirthdayPicker = false"
				/>
			</u-form-item>
			
			<view class="group">
				<u-form-item label="紧急联系人" prop="urgentContacts" borderBottom>
					<u-input v-model="formData.urgentContacts" placeholder="请输入紧急联系人" border="none" />
				</u-form-item>
				<u-form-item label="紧急联系人电话" prop="urgentContactsPhone">
					<u-input v-model="formData.urgentContactsPhone" placeholder="请输入紧急联系人电话" border="none" type="number" />
				</u-form-item>
			</view>
			
			<view class="group">
				<u-form-item label="年龄" prop="age" borderBottom>
					<u-input v-model="formData.age" placeholder="请输入年龄" border="none" type="number" />
				</u-form-item>
				<u-form-item label="身高" prop="height" borderBottom>
					<u-input v-model="formData.height" placeholder="请输入身高" border="none" type="number" />
				</u-form-item>
				<u-form-item label="身份证" prop="idcard">
					<u-input v-model="formData.idcard" placeholder="请输入身份证" border="none" type="idcard" />
				</u-form-item>
			</view>
		</u-form>
		
		<view class="bottom-add-btn">
			<u-button text="确认添加" shape="circle" @click="add" color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 100%)"></u-button>
		</view>
	</view>
</template>

<script>
import { formatDate } from '@/utils/util.js';	
	
export default {
	data() {
		return {
			showBirthdayPicker: false,
			formData: {
				gender: 1
			},
			rules: {
				name: {
					required: true, 
					message: '请输入姓名',
					trigger: ['change'],
				}
			},
			minDate: new Date(new Date().getFullYear() - 100, 0, 1).getTime(),
			maxDate: Date.now(),
			Default: new Date(new Date().getFullYear() - 20, 0, 1).getTime()
		}
	},
	onReady() {
		this.$refs.form.setRules(this.rules);
	},
	methods: {
		confirmBirthday({ value }) {
			this.formData.birthday = formatDate(value, 'YYYY-MM-DD');
			this.showBirthdayPicker = false;
		},
		async add() {
			try {
				const valid = await this.$refs.form.validate();
				if (valid) {
					console.log(this.formData);
				}
			} catch (e) {
				
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.add-student {
	min-height: 100vh;
	background-color: #f6f6f6;
	padding-bottom: calc(150rpx + env(safe-area-inset-bottom));

	/deep/.u-form {
		.u-form-item {
			background-color: #fff;
		}
		
		.u-form-item__body {
			padding: 30rpx;
		}
		
		.group {
			margin-top: 20rpx;
		}
		
		.u-form-item__body__right__message {
			margin-left: 270rpx !important;
		}
	}
}
</style>
